<template>
  <j-modal
    :title="title"
    :width="800"
    :visible="visible"
    :maskClosable="false"
    :ok-button-props="{ props: { disabled: disableSubmit } }"
    :fullscreen="true"
    @close="close"
    cancelText="关闭"
  >
    <div :class="{ isCheck: isCheck }">
      <!-- <div class="table-header">
        <span class="table-title">填报单位：</span>{{model.departName}}
        <span class="table-title">审计负责人：</span>{{model.auditPersonName}}
        <span class="table-title">填表人：</span>{{model.createByText}}
        <span class="table-title">填表时间：</span>{{model.createTime}}
        <span class="table-title">统计时间：</span>{{model.year}}年（{{model.quarter}}季度）
      </div> -->
      <a-table
        class="edit-list"
        ref="table"
        size="middle"
        bordered
        rowKey="name"
        width="100vw"
        :pagination="false"
        :columns="columns"
        :dataSource="dataSource"
        :scroll="{ x: 250, y: 520 }"
      >
        <div slot="title">
          <div class="title">{{ title }}</div>
          <div class="sub-title">
            <div>填报单位：{{ model.departName }}</div>
            <div>{{ model.year }}年（{{ model.quarter }}季）度</div>
            <div>审计负责人：{{ model.auditPersonName }}</div>
            <div>填表人：{{ model.createByText }}</div>
            <div>填表时间：{{ model.createTime }}</div>
            <div>金额单位（万元）</div>
          </div>
        </div>
        <template slot="customTitle">
          <div class="header-title">
            <div style="position: absolute; top: 62px; left: -51px">项目</div>
            <div style="position: absolute; top: 11px; left: 20px; width: 30px">内容</div>
            <div
              style="
                content: '';
                position: absolute;
                width: 1px;
                height: 188px;
                top: -40px;
                left: 0px;
                background-color: rgb(200 207 211);
                display: block;
                transform: rotate(305deg);
                box-sizing: border-box;
              "
            />
          </div>
        </template>
        <template slot="name" slot-scope="name">
          <div style="width: 100%; height: 45px; overflow-x: hidden; overflow-y: auto">{{ name }}</div>
        </template>
        <template v-for="col in customRenderList" v-slot:[col]="text, record, index">
          <span :key="col" v-if="record.name == '合计'" class="spancell">{{ record[col] }}</span>
          <span :key="col" v-else>{{ record[col] }}</span>
        </template>
        <template v-for="item in spancell" v-slot:[item]="text">
          <span class="spancell" :key="item">{{ text }}</span>
        </template>
      </a-table>
      <FileTag :apiId="apiId"></FileTag>
    </div>
  </j-modal>
</template>
<script>
import { httpAction, getAction } from '@/api/manage'
import columns from './columns'
import FileTag from '../../components/FileTag'

export default {
  name: 'CheckAndEditModel',
  components: {
    FileTag,
  },
  data() {
    return {
      disableSubmit: false,
      columns: columns(this),
      dataSource: [],
      title: '',
      visible: false,
      isCheck: false,
      apiId: '',
      model: {},
      customRenderList: [
        'a1',
        'a2',
        'a3',
        'a4',
        'a5',
        'a6',
        'a7',
        'a8',
        'a10',
        'a12',
        'a15',
        'a17',
        'a19',
        'a20',
        'a23',
        'a25',
        'a27',
        'a29',
        'a31',
        'a33',
        'a36',
        'a38',
        'a40',
        'a42',
        'a43',
        'a44',
        'a45',
        'a46',
        'a49',
        'a51',
        'a53',
        'a55',
        'a57',
        'a59',
      ],
      spancell: [
        'a9',
        'a11',
        'a13',
        'a14',
        'a16',
        'a18',
        'a21',
        'a22',
        'a24',
        'a26',
        'a28',
        'a30',
        'a32',
        'a34',
        'a35',
        'a37',
        'a39',
        'a41',
        'a47',
        'a48',
        'a50',
        'a52',
        'a54',
        'a56',
        'a58',
      ],
    }
  },
  created() {},
  methods: {
    check(record) {
      this.model = Object.assign({}, record)
      this.dataSource = JSON.parse(this.model.reportInfo)
      this.apiId = this.model['fileId']
      this.visible = true
    },
    close(isSubmit) {
      if (isSubmit) {
      } else {
        this.visible = false
      }
    },
  },
}
</script>

<style lang="less" scoped>
// @import '../../css/checkAndEdit.less';
@import '../css/baobiaotable.less';

.table-header {
  margin-bottom: 10px;

  .table-title {
    font-weight: bold;
    margin-left: 15px;
  }
}
</style>
